import  React, {lazy,Suspense}from 'react';
import {connect} from 'react-redux';
import {Switch,Route, Redirect} from 'react-router-dom';
import {GoPagePush} from '../../../assets/js/utils/index';
import Css from '../../../assets/css/home/main/index.css';
const Index = lazy(()=>import('../index'));
const Cart =lazy(()=>import('../cart'));
const User = lazy(()=>import('../../uesr/ucenter'))
class mainPages extends React.Component{
    constructor(){
        super();
        this.state={
            nav:[
                {
                    name:'首页',
                    icn:'home',
                    url:'home/index',
                    iAction:false,
                    spot:'none'
                },
                {
                    name:'购物车',
                    icn:'cart',
                    url:'home/cart',
                    iAction:false,
                    spot:'block'
                },
                {
                    name:'我的',
                    icn:'personal',
                    url:'home/user',
                    iAction:false,
                    spot:'none'
                }
            ]
        }
    }
    componentDidMount(){
        this.handlNav()
    }
    //刷新默认状态
    handlNav(){
        let pathname=this.props.location.pathname;
        let temNwav=this.state.nav;
        switch (pathname) {
        case window.base.config.path+'home/index':
            temNwav[0].iAction=true;
            break;
        case window.base.config.path+'home/cart':
            temNwav[1].iAction=true;
            break;
        case window.base.config.path+'home/user':
            temNwav[2].iAction=true;
            break;
        default:
            temNwav[0].iAction=true;
            break;
        }
        this.setState({nav:temNwav})
    }
    //点击切换页面
    goPage(index,url){
        GoPagePush(this.props,url);
        this.setNavAction(index);
    }
    //点击默认状态
    setNavAction(index){
        let temNav=this.state.nav;
        for(let i in temNav){
            temNav[i].iAction=false;
            temNav[index].iAction=true;
        }
        this.setState({nav:temNav})
    }
    render(){
        return(
            <div >
                <div className={Css['indBottom']}>
                    <Suspense fallback={<React.Fragment />}>
                        <Switch>
                            <Route path={window.base.config.path+'home/index'} component={Index} />
                            <Route path={window.base.config.path+'home/cart'} component={Cart} />
                            <Route path={window.base.config.path+'home/user'} component={User} />
                            {/*<Redirect to={window.base.config.path+'home/index'} />*/}
                        </Switch>
                    </Suspense>
                </div>
                <div class={Css['mainBottom']}>
                    <ul>
                        {
                            this.state.nav.length>0?this.state.nav.map((item,index)=>{
                                return(
                                    <li key={index}className={item.iAction?Css['active']:''} onClick={this.goPage.bind(this,index,item.url)}><i className={item.icn}/>{item.name}<div className={this.props.state.redCart.aCartData.length>0?item.spot+' spot':item.spot+' spot hiden'}></div> </li>
                                )
                            }):''
                        }
                    </ul>

                </div>
            </div>
        )
    }
};
export default connect((state)=>{
    return{
        state:state
    }
})(mainPages) ;